import React from "react";
import { createStyles } from "antd-style";

export interface NImageStackingProps<T> {
  className?: string,
  style?: React.CSSProperties,
  itemClassName?: string,
  itemStyle?: React.CSSProperties,
  getItemKey?: (value: T) => number| string,
  data: T[],
  render: (value: T, index: number) => React.ReactNode,
}

export const NImageStacking = function <T>({ className = "", style, itemClassName = "", itemStyle, getItemKey, data, render }: NImageStackingProps<T>) {
  const { styles } = useStyle();

  return <div className={`${styles.nImageStacking} ${className}`} style={style}>
    {data.reverse().map((value, index) => <div
      key={ getItemKey ? getItemKey(value) :index}
      className={`item ${itemClassName}`}
      style={itemStyle}
    >{render(value, index)}</div>)}
  </div>
}


const useStyle = createStyles(({ css }) => ({
  nImageStacking: css`
    position: relative;
    & > .item{
    &:first-child{
      background-color: rgba(0, 0, 0, 0.15);
      position: absolute;
      top:0px;
      left: 0px;
      z-index: 3;
    }

    &:nth-child(2){
      z-index: 2;
      top: 3px;
      left: 3px;
    }

    &:nth-child(3){
      z-index: 1;
      top: 6px;
      left: 6px;
    }

    &:not(:first-child){
      position: absolute;
    }
  }
  `
}))
